import { Card } from 'antd';
import { ReactNode } from 'react';

type CardItem = {
  label: string;
  value?: string;
  key: string | number;

  /**
   * 单位 有时候金额太大用万亿等单位展示
   */
  unit?: string;
};

interface NumCardListPorps<ItemType extends CardItem = CardItem> {
  items?: ItemType[];
  onClick?(key: ItemType['key'], item: ItemType): void;
  style?: React.CSSProperties;
  valueRender?(item: ItemType): ReactNode;
  cardStyle?: React.CSSProperties;
  cardMinWidth?: string | number;
}

export function NumCardList<ItemType extends CardItem = CardItem>({
  items,
  onClick,
  style,
  valueRender,
  cardStyle,
  cardMinWidth,
}: NumCardListPorps<ItemType>) {
  return (
    <ul
      style={{
        minHeight: 100,
        display: 'flex',
        gap: 10,
        overflow: 'overlay',
        padding: 8,
        ...style,
      }}
    >
      {items?.map((v) => {
        return (
          <li
            key={v.label}
            style={{
              flexGrow: 1,
              flexShrink: 0,
              minWidth: cardMinWidth,
              width: cardMinWidth,
              ...cardStyle,
            }}
          >
            <Card hoverable onClick={() => onClick?.(v.key, v)} bodyStyle={{ padding: 16, whiteSpace: 'nowrap' }}>
              <div style={{ fontSize: 32, fontWeight: 600 }}>
                {valueRender ? valueRender(v) : v.value}
                {v.unit ? <span style={{ fontSize: 16 }}>{v.unit}</span> : null}
              </div>
              <div style={{ color: '#999' }}>{v.label}</div>
            </Card>
          </li>
        );
      })}
    </ul>
  );
}

export function createCardItem(
  label: string,
  value: string,
  key: string | number,
  /**
   * 单位 有时候金额太大用万亿等单位展示
   */
  unit?: string,
) {
  return { label, value, key, unit };
}
